<template>
  <div class="container">
    <ScreenAdapter>
      <div class="content">
        <div class="header">时间轴demo</div>
        <div class="main">
          <div class="timeline">
            <div class="fistLine">
              <div class="fistLine-header"></div>
            </div>
            <div class="timeline-card" v-for="monthItem in timelineData" :key="monthItem.month">
              <div class="card-header">
                <span class="month">{{ monthItem.month }}月</span>
                <span class="count">({{ monthItem.count }}件)</span>
              </div>
              <div class="card-mian">
                <div class="card-placeholder"></div>
                <div class="tip">
                  <div class="card-number">{{ monthItem.item.data }}日</div>
                  <div class="card-item">
                    <div class="card-text">
                      {{ monthItem.item.text }}
                    </div>
                    <div class="iconFont">
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timeline">
            <div class="fistLine">
              <div class="fistLine-header"></div>
            </div>
            <div class="timeline-card" v-for="monthItem in timelineData1" :key="monthItem.month">
              <div class="card-header">
                <span class="month">{{ monthItem.month }}月</span>
                <span class="count">({{ monthItem.count }}件)</span>
              </div>
              <div class="card-mian">
                <div class="card-placeholder"></div>
                <div class="tip">
                  <div class="card-number">{{ monthItem.item.data }}日</div>
                  <div class="card-item">
                    <div class="card-text">
                      {{ monthItem.item.text }}
                    </div>
                    <div class="iconFont">
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timeline">
            <div class="fistLine">
              <div class="fistLine-header"></div>
            </div>
            <div class="timeline-card" v-for="monthItem in timelineData2" :key="monthItem.month">
              <div class="card-header">
                <span class="month">{{ monthItem.month }}月</span>
                <span class="count">({{ monthItem.count }}件)</span>
              </div>
              <div class="card-mian">
                <div class="card-placeholder"></div>
                <div class="tip">
                  <div class="card-number">{{ monthItem.item.data }}日</div>
                  <div class="card-item">
                    <div class="card-text">
                      {{ monthItem.item.text }}
                    </div>
                    <div class="iconFont">
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timeline">
            <div class="fistLine">
              <div class="fistLine-header"></div>
            </div>
            <div class="timeline-card" v-for="monthItem in timelineData3" :key="monthItem.month">
              <div class="card-header">
                <span class="month">{{ monthItem.month }}月</span>
                <span class="count">({{ monthItem.count }}件)</span>
              </div>
              <div class="card-mian">
                <div class="card-placeholder"></div>
                <div class="tip">
                  <div class="card-number">{{ monthItem.item.data }}日</div>
                  <div class="card-item">
                    <div class="card-text">
                      {{ monthItem.item.text }}
                    </div>
                    <div class="iconFont">
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                      <img src="@/assets/paimai.svg" alt="拍卖图标" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ScreenAdapter>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  name: 'demo', //组件名称
})
</script>
<script lang="ts" setup>
import {ref} from 'vue'
import {Top, Bottom, Position} from '@element-plus/icons-vue'
const timelineData = ref([
  {
    month: 1,
    count: 5,
    item: {
      id: 1,
      data: 6,
      text: '订单1111所',
    },
  },
  {
    month: 2,
    count: 4,
    item: {
      id: 2,
      data: 5,
      text: '订单222222222222222222222222222222222222',
    },
  },
  {
    month: 3,
    count: 10,
    item: {
      id: 3,
      data: 2,
      text: '订单3333333333333333333333333',
    },
  },
])
const timelineData1 = ref([
  {
    month: 6,
    count: 5,
    item: {
      id: 1,
      data: 6,
      text: '订单1111所但是发的所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所',
    },
  },
  {
    month: 5,
    count: 4,
    item: {
      id: 2,
      data: 5,
      text: '订单222222222222222222222222222222222222',
    },
  },
  {
    month: 4,
    count: 10,
    item: {
      id: 3,
      data: 2,
      text: '订单3333333333333333333333333',
    },
  },
])
const timelineData2 = ref([
  {
    month: 7,
    count: 5,
    item: {
      id: 1,
      data: 6,
      text: '订单1111',
    },
  },
  {
    month: 9,
    count: 4,
    item: {
      id: 2,
      data: 5,
      text: '订单222222222222222222222222222222222222',
    },
  },
  {
    month: 9,
    count: 10,
    item: {
      id: 3,
      data: 2,
      text: '订单3333333333333333333333333',
    },
  },
])
const timelineData3 = ref([
  {
    month: 12,
    count: 5,
    item: {
      id: 1,
      data: 6,
      text: '订单1111',
    },
  },
  {
    month: 11,
    count: 4,
    item: {
      id: 2,
      data: 5,
      text: '订单222222222222222222222222222222222222',
    },
  },
  {
    month: 10,
    count: 10,
    item: {
      id: 3,
      data: 2,
      text: '订单3333333333333333333333333',
    },
  },
])
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 0 0;
    background-color: #f1f4fa;
    width: 2380px;
    height: 1300px;
    padding: 0 10px;
    .header {
      height: 100px;
      line-height: 100px;
      font-size: 32px;
      text-align: center;
      background-color: #cee5fe;
      color: #2e2f31;
      border-bottom: 1px solid #318cf4;
    }
    .main {
      height: calc(100% - 100px);
      padding-top: 50px;
      padding-left: 60px;
      .timeline {
        display: flex;
        position: relative;
        margin-right: 60px;
        width: calc(100% - 120px);
        .timeline-card {
          flex: 1;
          .card-header {
            position: relative;
            height: 60px;
            line-height: 50px;
            margin-left: 26px;
            border-bottom: 5px solid;
            border-image: linear-gradient(to right, #1eacfe, #20a7ff) 1;
            &::before {
              content: '';
              position: absolute;
              left: -26px;
              bottom: -13px;
              width: 26px;
              height: 26px;
              background: conic-gradient(#21affe 0deg, #2addfd 180deg, #21affe 360deg);
              mask: radial-gradient(farthest-side, transparent 60%, black 61%);
              -webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%);
              border-radius: 50%;
              box-sizing: border-box;
              z-index: 1;
            }
            &::after {
              content: '';
              position: absolute;
              top: 55px;
              left: -10px;
              width: 5px;
              height: 5px;
              transform: translate(-50%, -50%);
              border: 5px solid transparent;
              border-left: 6px solid #21affe;
              background-color: transparent;
            }
            .month {
              position: absolute;
              top: 0;
              left: -34px;
              font-size: 24px;
              vertical-align: middle;
              color: #2f7aa3;
              margin-right: 10px;
            }
            .count {
              position: absolute;
              top: 0;
              left: 24px;
              font-size: 18px;
              // margin-left: 10px;
            }
          }

          .card-mian {
            .card-placeholder {
              margin-left: 10px;
              border-left: 1px dotted #909399;
              height: 40px;
            }
            .tip {
              display: flex;
              margin-bottom: 60px;
              .card-number {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .card-item {
                background-color: #fff;
                width: 85%;
                padding: 15px;
                margin-left: 20px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                border-radius: 8px;

                .card-text {
                  font-size: 16px;
                  width: 70%;
                  border: 1px solid pink;
                  word-break: break-all;
                }
                .iconFont {
                  display: flex;
                  margin-top: 15px;
                  img {
                    width: 30px;
                    height: 30px;
                    display: block;
                    margin-right: 15px;
                  }
                }
              }
            }
          }
        }
        &:nth-child(1) {
          .fistLine {
            width: 50px;
            // height: 100%;
            .fistLine-header {
              height: 60px;
              border-bottom: 5px solid;
              border-image: linear-gradient(to right, #dce9f1, #61b4ec) 1;
            }
          }
          .timeline-card:last-child::after {
            content: '';
            position: absolute;
            top: 60px;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #1eacfe, #20a7ff);
            z-index: 0;
          }
        }
        &:nth-child(2) {
          .fistLine {
            width: 50px;
            // height: 100%;
            .fistLine-header {
              height: 60px;
              border-bottom: 5px solid;
              border-image: linear-gradient(to right, #69c0f6, #33a6f3) 1;
            }
          }
          .fistLine::before {
            content: '';
            position: absolute;
            top: 60px;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #1eacfe, #20a7ff);
            z-index: 0;
          }
          .card-header {
            &::after {
              content: '';
              position: absolute;
              top: 55px;
              left: -16px;
              width: 5px;
              height: 5px;
              transform: translate(-50%, -50%);
              border: 5px solid transparent;
              border-right: 6px solid #21affe;
              background-color: transparent;
            }
          }
        }
        &:nth-child(3) {
          .fistLine {
            width: 50px;
            // height: 100%;
            .fistLine-header {
              height: 60px;
              border-bottom: 5px solid;
              border-image: linear-gradient(to right, #69c0f6, #33a6f3) 1;
            }
          }
          .timeline-card:last-child::after {
            content: '';
            position: absolute;
            top: 60px;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #1eacfe, #20a7ff);
            z-index: 0;
          }
        }
        &:nth-child(4) {
          .fistLine {
            width: 50px;
            // height: 100%;
            .fistLine-header {
              height: 60px;
              border-bottom: 5px solid;
              border-image: linear-gradient(to right, #dce9f1, #61b4ec) 1;
            }
          }
          .card-header {
            &::after {
              content: '';
              position: absolute;
              top: 55px;
              left: -16px;
              width: 5px;
              height: 5px;
              transform: translate(-50%, -50%);
              border: 5px solid transparent;
              border-right: 6px solid #21affe;
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>
